<template>
  <div>
    <!-- 提示栏区 -->
    <el-row class="tips" v-show="hintVisible">
      <el-col :span="18">
        <span>当前已「</span>
        <span>{{ enterpriseConfigObj.anchorAutoApprove == 1 ? '开启' : '关闭' }}</span>
        <span>」自动审核主播申请，可前往参数设置</span>
        <span>{{ enterpriseConfigObj.anchorAutoApprove == 1 ? '关闭。' : '开启。' }}</span>
        <el-button type="text" @click="doLinkConfig">立即前往</el-button>
      </el-col>
      <el-col :span="6" align="right">
        <el-button type="info" icon="el-icon-close" class="mar-r-10" style="padding: 1px;" circle @click="doCloseHint">
        </el-button>
      </el-col>
    </el-row>
    <!-- 搜索区 -->
    <div class="top-operate-default pad-20">
      <div class="search-item">
        <label class="font-14">搜索主播：</label>
        <el-select v-model="textCol" class="select-width">
          <el-option label="微客昵称" value="nickname"></el-option>
          <el-option label="微客手机号" value="phone"></el-option>
          <el-option label="微信号" value="wechatNo"></el-option>
          <el-option label="抖音主播ID号" value="douYinNo"></el-option>
          <el-option label="快手主播ID号" value="kuaiShouNo"></el-option>
          <el-option label="一级合伙人昵称" value="onePartnerName"></el-option>
          <el-option label="一级合伙人手机号" value="onePartnerPhone"></el-option>
          <el-option label="二级合伙人昵称" value="twoPartnerName"></el-option>
          <el-option label="二级合伙人手机号" value="twoPartnerPhone"></el-option>
          <el-option label="招募员昵称" value="recruiterName"></el-option>
          <el-option label="招募员手机号" value="recruiterPhone"></el-option>
          <el-option label="店主昵称" value="memberShopName"></el-option>
          <el-option label="店主手机号" value="memberShopPhone"></el-option>
        </el-select>
        <el-input v-model="textValue" placeholder="请输入搜索内容" style="width: 200px"></el-input>
        <label class="mar-l-20">申请方式：</label>
        <el-select v-model="defaultQuery.source" clearable class="select-width">
          <el-option v-for="(item, key) in dict.source" :key="key" :label="item" :value="key"></el-option>
        </el-select>
        <el-select v-model="timeCol" class="mar-l-20">
          <el-option label="申请时间" value="applyTime" v-if="tabActive == '0'"></el-option>
          <el-option label="通过时间" value="passTime" v-if="tabActive == '1'"></el-option>
          <el-option label="拒绝时间" value="rejectTime" v-if="tabActive == '2'"></el-option>
        </el-select>
        <el-date-picker v-model="dateTimePicker" type="datetimerange" unlink-panels range-separator="至"
          value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions" :default-time="['00:00:00', '23:59:59']"
          start-placeholder="开始时间" end-placeholder="结束时间">
        </el-date-picker>
        <el-button-group class="mar-l-20">
          <el-button type="primary" @click="doSearch">查询</el-button>
          <el-button @click="doResetSearch">重置</el-button>
        </el-button-group>
      </div>
    </div>
    <!-- tab区 -->
    <div class="tabs-box mar-b-15 mar-t-15">
      <el-tabs type="card" v-model="tabActive" @tab-click="doChangeTab">
        <el-tab-pane v-for="(item, key) in labels" :key="key" :label="item" :name="key"></el-tab-pane>
      </el-tabs>
    </div>
    <!-- 按钮区 -->
    <div v-if="tabActive == '0'" class="height-34 font-14 v-align-c">
      <el-checkbox class="mar-l-15 mar-r-0" v-model="checkedAll" @change="doSelectAll"><span
          class="mar-l-20">当页全选</span></el-checkbox>
      <span class="pad-l-4 pad-r-4">|</span>
      <div class="width-80">已选{{multipleSelection.length}}项</div>
      <el-button class="mar-l-5" @click="doBatchUpdate(1)">批量通过</el-button>
      <el-button class="mar-l-5" @click="doBatchUpdate(2)">批量拒绝</el-button>
    </div>
    <!-- 内容列表 -->
    <div class="tab-container mar-t-15">
      <div class="c-table" v-loading="listLoading" element-loading-text="加载中">
        <div class="c-table__head">
          <div class="c-table__td select"></div>
          <div class="c-table__td goods-info">带货渠道</div>
          <div class="c-table__td">
            <template v-if="tabActive == '0'">申请时间</template>
            <template v-else-if="tabActive == '1'">通过时间</template>
            <template v-else>拒绝时间</template>
          </div>
          <div class="c-table__td">账号ID</div>
          <div class="c-table__td">截图证明</div>
          <div class="c-table__td text-align-r">
            <span>操作</span>
          </div>
          <div class="c-table__td text-align-r" v-if="tabActive == '2'">
            <span>拒绝原因</span>
          </div>
        </div>
        <div class="c-table__body">
          <div class="c-table__row" v-for="(item, index) in dataList" :key="index">
            <div class="c-row__head">
              <div class="c-row__left">
                <div class="c-table__td select">
                  <el-checkbox v-model="item.checked" @change="doSelect" />
                </div>
                <img :src="item.avatar" alt="" class="width-38 height-38">
                <div class="align-l mar-l-10">
                  <div style="line-height:1.4;"><span class="font-color-9">昵称：</span>{{ item.nickname }}</div>
                  <div style="line-height:1.4;"><span class="font-color-9">手机：</span>{{ item.phone }}</div>
                </div>
                <div class="mar-l-30">
                  <span class="font-color-9">申请方式：</span><span>{{ dict.source[item.source] }}</span>
                  <span v-if="item.source == 2">【{{ item.onePartnerName }}】&nbsp;{{ item.onePartnerPhone }}</span>
                  <span v-if="item.source == 3">【{{ item.twoPartnerName }}】&nbsp;{{ item.twoPartnerPhone }}</span>
                  <span v-if="item.source == 4">【{{ item.recruiterName }}】&nbsp;{{ item.recruiterPhone }}</span>
                  <span v-if="item.source == 5">【{{ item.memberShopName }}】&nbsp;{{ item.memberShopPhone }}</span>
                </div>
              </div>
              <div class="c-row__right">
              </div>
            </div>
            <div class="c-table__tr" v-for="(apply_item, apply_index) in item.relationPlatformList" :key="apply_index">
              <div class="c-table__td v-align-c">
                <template v-if="apply_item.relationPlatform == 1">
                  <!-- 微信 -->
                  <img :src="iconWechat" alt="" class="width-16 height-16 mar-r-5">
                  <span>微信</span>
                </template>
                <template v-else-if="apply_item.relationPlatform == 2">
                  <!-- 抖音 -->
                  <img :src="iconDouyin" alt="" class="width-16 height-16 mar-r-5">
                  <span>抖音</span>
                </template>
                <template v-else>
                  <!-- 快手 -->
                  <img :src="iconKuaishou" alt="" class="width-16 height-16 mar-r-5">
                  <span>快手</span>
                </template>
              </div>
              <div class="c-table__td">
                <template v-if="tabActive == '0'">{{ apply_item.createTime }}</template>
                <template v-else-if="tabActive == '1'">{{ apply_item.passDate }}</template>
                <template v-else>{{ apply_item.rejectTime }}</template>
              </div>
              <div class="c-table__td">{{ apply_item.relationNo }}</div>
              <div class="c-table__td">
                <el-image v-if="apply_item.proveImageList != undefined && apply_item.proveImageList.length > 0"
                  class="width-40 height-40 mar-r-15" :src="apply_item.proveImageList[0]"
                  :preview-src-list="apply_item.proveImageList">
                </el-image>
                <!--                <template v-for="(img, img_index) in apply_item.applyImageList" >
                  <img :src="img" :key="img_index" class="height-40 mar-r-15" @click="doSwiperPicEls(apply_item.applyImageList)">
                </template> -->
              </div>
              <div class="c-table__td" style="justify-content: flex-end;">
                <el-button type="text" @click="goApplyDetailMesg(item,apply_item)">申请详情</el-button>
                <el-button v-if="tabActive == '0'" type="text" @click="doUpdate(apply_item, 1)">通过</el-button>
                <el-button v-if="tabActive == '0'" type="text" @click="doUpdate(item, 2)">拒绝</el-button>
              </div>
              <div class="c-table__td" style="justify-content: flex-end;" v-if="tabActive == '2'">
                <div> {{ item.rejectReason ? item.rejectReason : '无' }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 列表分页 -->
    <div class="pagination">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="searchListQuery.currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="searchListQuery.size"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <!-- 截图证明，轮播查看 -->
    <template v-if="swiperPicVisible">
      <div class="pic-swiper-box" @click="swiperPicVisible = false">
        <el-carousel :interval="5000" arrow="always" indicator-position="none" :autoplay="false" height="650px">
          <el-carousel-item v-for="(item, index) in applyImageList" :key="index">
            <div>
              <img :src="item" />
            </div>
            <div class="count font-18 font-color font-white">{{ index + 1 }} / {{ applyImageList.length }}</div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="pic-swiper-bg" @click="swiperPicVisible = false"></div>
    </template>

    <!-- 提示关闭弹窗 -->
    <el-dialog title="确认操作" width="500px" v-el-drag-dialog :visible.sync="hintOperateVisible">
      <el-radio-group v-model="hintRadio">
        <el-radio label="0">今天不再显示</el-radio>
        <el-radio label="1">我已深知该业务功能配置，不再显示</el-radio>
      </el-radio-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="hintOperateVisible = false">取消</el-button>
        <el-button type="primary" @click="doSaveHint">确定</el-button>
      </div>
    </el-dialog>

    <!-- 拒绝弹窗 -->
    <el-dialog title="拒绝原因" width="400px" v-el-drag-dialog :visible.sync="rejectVisible">
      <el-input type="textarea" :rows="3" v-model="anchorForm.rejectReason" placeholder="请输入拒绝原因"
        class="pad-l-30 pad-r-30"></el-input>
      <div slot="footer" class="dialog-footer">
        <el-button @click="rejectVisible = false">取消</el-button>
        <el-button type="primary" @click="doReject">确定</el-button>
      </div>
    </el-dialog>
    <!-- 申请详情 弹窗 -->
    <apply-detail ref="applyDetail"></apply-detail>
  </div>
</template>

<script>
  import {
    pagingMemberRoleAuthority,
    statisticsStatus,
    updateBatchStatus,
    updateAnchorAutoAuthorityHint
  } from '@/api/user/memberRoleAuthority'
  import {
    getByEnterpriseId
  } from '@/api/user/enterprise'
  import elDragDialog from '@/directive/el-dragDialog'
  import iconDouyin from '@/assets/images/icon-douyin.png'
  import iconKuaishou from '@/assets/images/icon-kuaishou.png'
  import iconWechat from '@/assets/images/icon-wechat.png'
  import ApplyDetail from '../apply-detail'
  export default {
    directives: {
      elDragDialog
    },
    components: {
      ApplyDetail
    },
    data() {
      return {
        // 文本model
        textCol: 'nickname',
        textValue: '',
        // 日期model
        timeCol: 'applyTime',
        dateTimePicker: [],
        // 默认条件
        defaultQuery: {
          currentPage: 1,
          size: 10,
          enterpriseId: '',
          source: '',
          memberRoleType: 2 // 微客角色类型：1-批发商，2-主播
        },
        // 查询条件
        searchListQuery: {},
        // tab标签
        labels: {
          '0': '待审核(0)',
          '1': '已通过(0)',
          '2': '未通过(0)'
        },
        // tab标签模板
        labelTemp: {
          '0': '待审核(s)',
          '1': '已通过(s)',
          '2': '未通过(s)'
        },
        // 数据字典
        dict: {
          source: {}
        },
        // 日期组件
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        // tab model对象
        tabActive: '0',
        // 企业配置对象
        enterpriseConfigObj: {},
        // 提示操作visible
        hintOperateVisible: false,
        // 提示栏visible
        hintVisible: false,
        // 拒绝visible
        rejectVisible: false,
        // 提示radio
        hintRadio: '0',
        // 图标图片
        iconDouyin: iconDouyin,
        iconKuaishou: iconKuaishou,
        iconWechat: iconWechat,
        // 主播表单
        anchorForm: {
          roleAuthorityIdList: [],
          applyStatus: '',
          rejectReason: ''
        },
        // 全选model
        checkedAll: false,
        listLoading: false,
        swiperPicVisible: false,
        // 申请图片集合
        applyImageList: [],
        total: 0,
        dataList: [],
        multipleSelection: []
      }
    },
    // 初始化页面
    created() {
      Object.assign(this.searchListQuery, this.defaultQuery)
      // 获取企业配置
      getByEnterpriseId(this.getEnterpriseId()).then(response => {
        if (response.isError) return
        this.enterpriseConfigObj = response.data
        this.hintVisible = response.data.anchorAutoApproveHint === 1
      })
      this.initList()
    },
    methods: {
      // 初始化
      initList() {
        this.listLoading = true
        this.multipleSelection = []
        this.checkedAll = false
        const size = this.searchListQuery.size
        const currentPage = this.searchListQuery.currentPage
        this.searchListQuery = {
          ...this.defaultQuery
        }
        this.searchListQuery.size = size
        this.searchListQuery.currentPage = currentPage
        this.searchListQuery[this.textCol] = this.textValue
        this.searchListQuery.dateColumn = this.timeCol
        this.searchListQuery.startDate = (this.dateTimePicker && this.dateTimePicker.length > 0) ? this.dateTimePicker[
          0] : ''
        this.searchListQuery.endDate = (this.dateTimePicker && this.dateTimePicker.length > 1) ? this.dateTimePicker[
          1] : ''
        this.searchListQuery.applyStatus = this.tabActive
        this.searchListQuery.enterpriseId = this.getEnterpriseId()
        pagingMemberRoleAuthority(this.searchListQuery).then(response => {
          if (response.isError) return
          this.listLoading = false
          this.dataList = response.data.records
          this.total = response.data.total
          this.dict = response.data.dict
          this.dataList.forEach(e => this.$set(e, 'checked', false))
        })
        this.statHandle()
      },
      // 显示申请详情弹窗
      goApplyDetailMesg(item, relationPlatformInfo) {
        this.$nextTick(() => {
          this.$refs.applyDetail.setData(item, relationPlatformInfo)
          this.$refs.applyDetail.open()
        })
      },
      // 统计处理
      statHandle() {
        statisticsStatus(this.searchListQuery).then(response => {
          if (response.isError) return
          response.data.forEach(item => {
            if (item.typeValue === 0) {
              this.labels[0] = this.labelTemp[0].replace('s', item.totalCount)
            }
            if (item.typeValue === 1) {
              this.labels[1] = this.labelTemp[1].replace('s', item.totalCount)
            }
            if (item.typeValue === 2) {
              this.labels[2] = this.labelTemp[2].replace('s', item.totalCount)
            }
          })
        })
      },
      // 查询事件
      doSearch() {
        this.searchListQuery.currentPage = 1
        this.initList()
      },
      // 重置事件
      doResetSearch() {
        const originData = this.$options.data()
        this.textCol = originData.textCol
        this.textValue = originData.textValue
        this.dateTimePicker = originData.dateTimePicker
        this.defaultQuery = originData.defaultQuery
        this.doSearch()
      },
      // tab切换事件
      doChangeTab() {
        this.dateTimePicker = []
        switch (this.tabActive) {
          case '0':
            this.timeCol = 'applyTime'
            break
          case '1':
            this.timeCol = 'passTime'
            break
          default:
            this.timeCol = 'rejectTime'
        }
        this.doSearch()
      },
      // 立即前往事件
      doLinkConfig() {
        this.$router.push({
          path: '/system/system-config/index',
          query: {
            active: 'anchor-set'
          }
        })
      },
      // 保存是否提示设置
      doSaveHint() {
        updateAnchorAutoAuthorityHint(this.getEnterpriseId(), this.hintRadio).then((response) => {
          if (response.isError) return
          this.hintVisible = false
          this.hintOperateVisible = false
        })
      },
      // 关闭提示弹窗
      doCloseHint() {
        this.hintRadio = '0'
        this.hintOperateVisible = true
      },
      // 单选事件
      doSelect() {
        const isAll = this.dataList.findIndex(item => {
          return item.checked === false
        })
        if (isAll === -1) {
          this.checkedAll = true
          this.multipleSelection = this.$utils.deepClone(this.dataList)
        } else {
          this.checkedAll = false
          const list = this.dataList.filter(item => item.checked === true)
          this.multipleSelection = list
        }
      },
      // 全选事件
      doSelectAll(val) {
        if (val) {
          this.dataList.forEach(item => {
            item.checked = true
          })
          this.multipleSelection = this.$utils.deepClone(this.dataList)
        } else {
          this.dataList.forEach(item => {
            item.checked = false
          })
          this.multipleSelection = []
        }
      },
      // 批量通过/拒绝事件
      doBatchUpdate(authorityStatus) {
        const selections = this.multipleSelection
        if (selections.length === 0) {
          this.msgError('请勾选数据')
          return
        }
        console.log(this.multipleSelection)
        const roleAuthorityIdList = []
        const memberIds = []
        selections.forEach(e => {
          e.relationPlatformList.forEach(item => {
            roleAuthorityIdList.push(item.roleAuthorityId)
            memberIds.push(item.memberId)
          })
        })
        this.updateConfirmHandle(roleAuthorityIdList, memberIds, authorityStatus)
      },
      // 通过/拒绝事件
      doUpdate(row, authorityStatus) {
        const roleAuthorityIdList = []
        const memberIds = []
        roleAuthorityIdList.push(row.roleAuthorityId)
        this.updateConfirmHandle(roleAuthorityIdList, memberIds, authorityStatus)
      },
      // 更新确认处理
      updateConfirmHandle(roleAuthorityIdList, memberIds, authorityStatus) {
        const originData = this.$options.data()
        this.anchorForm = originData.anchorForm
        this.anchorForm.roleAuthorityIdList = roleAuthorityIdList
        this.anchorForm.memberIds = memberIds
        this.anchorForm.authorityStatus = authorityStatus
        if (authorityStatus !== 1) {
          this.rejectVisible = true
          return
        }
        this.updateHandle()
      },
      // 更新处理
      updateHandle() {
        const title = this.anchorForm.authorityStatus === 1 ? '通过' : '拒绝'
        this.$confirm('是否确认' + title + '？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.rejectVisible = false
          this.listLoading = true
          updateBatchStatus(this.getEnterpriseId(), this.defaultQuery.memberRoleType, this.anchorForm
            .roleAuthorityIdList, this.anchorForm.memberIds, this.anchorForm.authorityStatus, null, this
            .anchorForm.rejectReason).then(response => {
            if (response.isError) {
              this.listLoading = false
              return
            }
            this.msgSuccess(response.msg)
            this.statHandle()
            this.doSearch()
          })
        })

        // this.listLoading = true
        // batchUpdateStatus(this.anchorForm).then(response => {
        //   if (response.isError) {
        //     this.listLoading = false
        //     return
        //   }
        //   this.rejectVisible = false
        //   const title = this.anchorForm.authorityStatus === 1 ? '通过' : '拒绝'
        //   this.msgSuccess(title + '成功')
        //   this.statHandle()
        //   this.doSearch()
        // })
      },
      // 拒绝确定事件
      doReject() {
        this.updateHandle()
      },
      // 图片放大事件
      doSwiperPicEls(arrData) {
        this.applyImageList = []
        this.swiperPicVisible = true
        this.applyImageList = arrData
      },
      // 更改当前页数
      handleCurrentChange(val) {
        this.searchListQuery.currentPage = val
        this.initList()
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.searchListQuery.size = val
        this.initList()
      }
    }
  }
</script>

<style lang="less" scoped>
  .select-width {
    /deep/ .el-input {
      width: 160px;
    }
  }

  .user-avatar {
    width: 50px;
    height: 50px;
    display: block;
    border-radius: 50px;
  }

  .tips {
    height: 45px;
    line-height: 45px;
    font-size: 14px;
    background-color: #fff7cc;
    color: #333333;
    padding-left: 20px;
    margin-bottom: 20px;
  }

  .el-radio-group {
    padding-left: 5%;

    .el-radio {
      padding-top: 15px;
      display: block;
    }
  }

  .c-table {
    overflow: auto;

    .c-table__td {
      flex: 1;
      padding: 0 15px;
      flex-shrink: 0;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }

    .c-table__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 50px;
      background: #f7f8fa;
      color: #333333;

      .goods-info {
        width: 300px;
      }

      .select {
        width: 50px;
        flex: unset;
      }

      .text-align-r {
        justify-content: flex-end;
      }

    }

    .c-table__body {
      .c-table__row {
        .c-row__head {
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 50px;
          background-color: #f7f8fa;
          border-top: 1px solid #edeff6;
          border-bottom: 1px solid #edeff6;
          margin-top: 15px;
          padding-right: 15px;
        }

        .c-row__left {
          display: flex;
          align-items: center;
          justify-content: left;
          position: relative;
          font-size: 12px;

          img {
            border-radius: 50%;
          }
        }

        .c-table__tr {
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-bottom: 1px solid #edeff6;
          height: 50px;
          padding-left: 50px;

          &:hover {
            background-color: #f7f8fa;
            cursor: pointer;

            .text-align-r {
              background-color: #f7f8fa;
            }
          }

          &:first-child {
            &:hover {
              background-color: unset;
            }
          }

          .goods-info {
            width: 300px;
          }

          .select {
            width: 50px;
            flex: unset;
          }
        }
      }
    }
  }
</style>
